<template>
  <div>
    <div class="wrap">
      <div class="breadcrumb base-font-14 text-999"><span>首页</span>/<span>{{labelName}}</span></div>
      <div class="flex align-center subMenuBox flex-wrap">
        <div class="subMenuItem margin-bottom-15" v-for="(item,index) in subMenuList" :key="index"
          :class="subMenuListIndex===index?'checked':''" @click="subMenuHandle(index)" v-if="item.name">{{item.name}}</div>
      </div>
      <div v-if="list.length===0">
        <nodataVue></nodataVue>
      </div>
      <div v-else>
        <div class="com-news-List flex padding-tb-20" v-for=" (item,index) in list" :key="index"
          @click="goDetail(item.id)">
          <div class="leftImg"><el-image :src="item.image" fit="cover"></el-image></div>
          <div class="newsInfo">
            <div class="text-333 ellipsis1 base-font-20">{{item.title}}</div>
            <div class="infoContent">
              <div class="text-999 base-font-16 text-999 ellipsis2 margin-top-15">{{item.description}}</div>
            </div>
            <div class="flex align-center base-font-15 text-999">
              <span class="margin-right-40">{{item.labelName}}</span>
              <i class="el-icon-time"></i>
              <span class="margin-left-5">{{item.createTimeStr}}</span>
            </div>
          </div>
        </div>
      </div>


      <div class="text-center padding-bottom-15 padding-top-15">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" hide-on-single-page
          :current-page="pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="totalNum">
        </el-pagination>
      </div>
    </div>
    <!-- <foot></foot> -->
  </div>

</template>

<script>
  import banner from "@/static/image/lx/banner.jpg"
  import nodataVue from "../homePublic/nodata.vue"
  import {
    mapState,
    mapActions,
    mapMutations
  } from 'vuex'
  export default {
    components: {
      nodataVue
    },
    data() {
      return {
        banner,
        pageSize: 10,
        pageNum: 1,
        labelName: "",
        list: [],
        totalNum: 0,
        subMenuList: [],
        subMenuListIndex: 0,
		id:""

      }
    },
    computed: {
      ...mapState({
        menuListData: (state) => state.webData.menuListData,
      }),
    },
    mounted() {
       this.subMenuList=[]
    },

    watch: {
      $route: {
        handler(to, from) {
			console.log(this.menuListData,'menuListData')
          this.labelName = this.$route.query.name
		  this.menuListData.forEach((item,index)=>{
			  if(item.name===this.labelName){
				  this.id=item.id
			  }
		  })
           this.subMenuList=[]
          this.subMenuListIndex = this.$route.query.index*1
		  let menuIndex=this.$route.query.index*1
          this.$nextTick(() => {
			  this.getSelectLabelAndArticle(this.id)
            this.getList()
          })
        },
        deep:true,
        immediate: true, // 第一次初始化渲染就可以监听到
      }
    },


    methods: {
		// 二级菜单
		getSelectLabelAndArticle(id){
			console.log(id,'idddd')
			this.$selectLabelAndArticle({cateId:id}).then((res) => {
				this.subMenuList =res.data
			})
		},
		
      getList() {
        this.list = []
        this.$selectArticlePage({
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          labelName: (this.subMenuList.length > 0) ? this.subMenuList[this.subMenuListIndex].name : '',
        }).then((res) => {
          if (res.code === 0) {
            this.list = res.data
            this.totalNum = res.count
          }

        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.getList()

      },
      subMenuHandle(index) {
        this.subMenuListIndex = index
        this.getList()
      },
      goDetail(id) {
        this.$router.push({
          path: '/detail',
          query: {
            id: id,
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .breadcrumb {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f4f2e5;
    margin-bottom: 15px;
  }

  .com-news-List {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #f4f2e5;
    cursor: pointer;

    .leftImg {
      width: 220px;
      height: 160px;
      flex-shrink: 0;
      overflow: hidden;

      .el-image {
        width: 220px;
        height: 160px;
        transform: scale(1);
        -webkit-transform: scale(1);
        transition: transform 0.4s linear;
        -webkit-transition: transform 0.4s linear;

        &:hover {
          transform: scale(1.2);
          -webkit-transform: scale(1.2);
          transition: transform 0.4s linear;
          -webkit-transition: transform 0.4s linear;
        }
      }
    }

    .newsInfo {
      flex-grow: 1;
      padding-left: 20px;
      box-sizing: border-box;
      line-height: 1.7;
    }

    .infoContent {
      height: 85px;
    }

    &:hover {
      .text-333 {}
    }
  }

  .subMenuBox {
    margin-bottom: 15px;

    .menuName {
      line-height: 30px;
      width: 100px;
      border: 1px solid #FFFFFF;
      background: #fff;
    }

    .subMenuItem {
      color: #959595;
      font-size: 15px;
      display: block;
      height: 35px;
      line-height: 35px;
      padding: 0 20px;
      border: 1px solid #ddd;
      background: #fff;
      margin-right: 15px;
      cursor: pointer;

      &:hover {
        border: 1px solid #ef9b76;
        color: #fff;
        background: #ef9b76;
        cursor: pointer;
      }

      &.checked {
        border: 1px solid #ef9b76;
        color: #fff;
        background: #ef9b76;
        cursor: pointer;
      }
    }
  }
</style>
